<template>
  <div class="task_det">
    <navigate
      >任务详情

      <template v-slot:right>
        <div class="red_dot" v-if="false"></div>
        <img
          @click="toDelete"
          class="del_img"
          src="@/assets/images/userRecord/delete.png"
          alt=""
        />
      </template>
    </navigate>

    <div class="block_item bottom_padding_1389">
      <div class="scale_topic bottom_line">
        <div class="scale_name">{{ taskInfo.name }}</div>
        <div class="scale_tip">问卷测评整体概况</div>
      </div>
      <div class="inner_title padding_aside_694 margin_1">
        <img class="deraction_img" src="@/assets/images/common/bar.png" alt />
        <div>任务基本情况</div>
      </div>
      <div class="user_info">
        <div class="info_item width_6 info_label border_right border_bottom">
          测评任务名称
        </div>
        <div class="info_item width_7 info_ctt border_bottom">
          {{ taskInfo.name }}
        </div>
        <div class="info_item width_6 info_label border_right border_bottom">
          任务开始时间
        </div>
        <div class="info_item width_7 info_ctt border_bottom">
          {{
            taskInfo.start_time > 0
              ? convertTimestampToDateTime(taskInfo.start_time)
              : "--"
          }}
        </div>
        <div class="info_item width_6 info_label border_right border_bottom">
          任务结束时间
        </div>
        <div class="info_item width_7 info_ctt border_bottom">
          {{
            taskInfo.start_time > 0
              ? convertTimestampToDateTime(taskInfo.end_time)
              : "--"
          }}
        </div>

        <div class="info_item width_6 info_label border_right border_bottom">
          任务包含问卷
        </div>
        <div class="info_item width_8 info_ctt border_right border_bottom">
          {{ taskInfo.paper_num }}
        </div>
        <div class="info_item width_3 info_label border_right border_bottom">
          发布人
        </div>
        <div class="info_item width_4 info_ctt border_bottom">
          {{ taskInfo.user_name }}
        </div>
        <div class="info_item width_6 info_label border_right border_bottom">
          参与人数
        </div>
        <div class="info_item width_7 info_ctt border_bottom">
          {{ taskInfo.user_num }}
        </div>

        <div class="info_item width_6 info_label border_right border_bottom">
          测评用户姓名
        </div>
        <div class="info_item width_8 info_ctt border_right border_bottom">
          {{ taskInfo.user_name }}
        </div>
        <div class="info_item width_3 info_label border_right border_bottom">
          年龄
        </div>
        <div class="info_item width_4 info_ctt border_bottom">
          {{ taskInfo.age }}
        </div>
        <div class="info_item width_6 info_label border_right border_bottom">
          用户联系电话
        </div>
        <div class="info_item width_8 info_ctt border_right border_bottom">
          {{ taskInfo.phone }}
        </div>
        <div class="info_item width_3 info_label border_right border_bottom">
          性别
        </div>
        <div class="info_item width_4 info_ctt border_bottom">
          {{ taskInfo.sex == 1 ? "男" : "女" }}
        </div>

        <div class="info_item width_6 info_label border_right border_bottom">
          用户所在部门
        </div>
        <div class="info_item width_7 info_ctt border_bottom">
          {{ taskInfo.department_name }}
        </div>
        <div class="info_item width_6 info_label border_right">
          所有得分总计
        </div>
        <div class="info_item width_8 info_ctt border_right">
          {{ taskInfo.result_total_score }}
        </div>
        <div class="info_item width_3 info_label border_right">编号</div>
        <div class="info_item width_4 info_ctt">
          {{ taskInfo.id }}
        </div>
      </div>
    </div>

    <div class="inner_title padding_aside_694 margin_1">
      <img class="deraction_img" src="@/assets/images/common/bar.png" alt />
      <div>任务包含如下分卷</div>
    </div>
    <div class="list_box">
      <div
        class="item_info"
        v-for="(item, index) in questionnaireList"
        :key="index"
      >
        <div class="dis_flex">
          <img src="@/assets/images/common/bar.png" alt="" class="bar_img" />
          <div class="item_tit">{{ item.paper_name }}</div>
        </div>
        <div class="item_line"></div>
        <div class="dis_flex just_space_between">
          <div>
            <div class="item_txt">答卷人：{{ item.user_name }}</div>
            <div class="item_txt mar_top8">
              分卷得分：{{ item.paper_total_score }}分/{{
                item.paper_topic_num
              }}题
            </div>
          </div>
          <div
            class="item_btn"
            v-if="item.is_finish == 1"
            @click="checkResult(item)"
          >
            查看结果
          </div>
          <div class="item_btn dis_btn" v-else>查看结果</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { convertTimestampToDateTime } from "@/utils/time";
import { queryRecordDet, delQnReport } from "@/api/evaluation/questionnaire";
export default {
  data() {
    return {
      taskUserList: [],
      taskInfo: {},
      questionnaireList: [],
      id: "",
    };
  },
  created() {
    this.id = this.$route.query.id;
    this.getRecordDet();
  },
  methods: {
    convertTimestampToDateTime,
    checkResult(item) {
      if (item.result_user_del == 1) {
        return this.$toast.fail("该问卷已被删除");
      }
      this.$router.push({
        path: `/questionnaireResults?resultId=${item.result_id}`,
      });
    },
    async getRecordDet() {
      let res = await queryRecordDet({ id: this.id });
      if (res.code == 200) {
        this.questionnaireList = res.data.result;
        this.taskInfo = res.data.taskInfo;
      }
    },
    async toDelete() {
      this.$popup({
        visible: false,
        title: "提示",
        message: "确定要删除此记录吗？",
        confirmOperate: async () => {
          let res = await delQnReport({ id: this.id });
          if (res.code == 200) {
            this.$toast.success("删除成功");
            this.$router.go(-1);
          }
        },
      });
    },
  },
};
</script>

<style scoped lang="less">
.task_det {
  color: #333333;
  background-color: #f4f6fa;
}
.dis_flex {
  display: flex;
  align-items: center;
}
.flex1 {
  flex: 1;
}
.just_space_between {
  justify-content: space-between;
}
.mar_top8 {
  margin-top: 8px;
}
.del_img {
  width: 18px;
  height: 18px;
}
.block_item {
  height: fit-content;
  background: #ffffff;
  border-radius: 6.94px;
  box-sizing: border-box;
  margin: 10px;
}
.bottom_line {
  position: relative;
}
.bottom_line::before {
  display: block;
  width: 100%;
  height: 0.35px;
  background: #dddddd;
  position: absolute;
  bottom: 0;
  left: 0;
  content: "";
}
.inner_title {
  height: 24.31px;
  font-size: 15.97px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: bold;
  text-align: left;
  color: #333333;
  display: flex;
  align-items: center;
  gap: 10.42px;
  margin-bottom: 19.1px;
}
.deraction_img {
  height: 15.97px;
}
.padding_aside_694 {
  padding-left: 6.94px;
  padding-right: 6.94px;
}
.scale_topic {
  padding: 22.7425px 20.84px 15.4525px 20.84px;
  box-sizing: border-box;
  text-align: center;
}
.scale_name {
  font-size: 18px;
  line-height: 18px;
  color: #00aeff;
  font-weight: bold;
  margin-bottom: 16.33px;
}
.scale_tip {
  font-size: 15.33px;
  line-height: 15.33px;
  color: #666666;
}
.margin_1 {
  margin-top: 15.62px;
  margin-bottom: 15.27px;
}

.user_info {
  width: 340.28px;
  height: fit-content;
  background: #ffffff;
  border: 0.35px solid #cccccc;
  border-radius: 3.47px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
}
.border_right {
  border-right: 0.35px solid #cccccc;
}
.border_bottom {
  border-bottom: 0.35px solid #cccccc;
}
.width_1 {
  width: calc(76.74px - 0.35px);
}
.width_2 {
  width: calc(135.76px - 0.35px);
}
.width_3 {
  width: calc(62.5px - 0.35px);
}
.width_4 {
  width: calc(69.44px);
}
.width_5 {
  width: calc(263.19px - 0.35px * 4);
}
.width_6 {
  width: calc(104.51px - 0.35px);
}
.width_7 {
  width: calc(235.42px - 0.35px * 4);
}
.width_8 {
  width: calc(103px - 0.35px);
}
.info_item {
  line-height: 24.3px;
  font-size: 12.33px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: 400;
  box-sizing: border-box;
  padding: 5.21px 10.42px;
}
.info_label {
  text-align: justify;
  word-break: keep-all;
  color: #666666;
}
.info_ctt {
  color: #333333;
}
.bottom_padding_1389 {
  padding-bottom: 13.89px;
}
.item_info {
  padding: 16px 13px;
  border-radius: 6.67px;
  margin: 0 10px 10px 10px;
  background-color: #ffffff;
  &:last-child {
    margin-bottom: 0;
  }
}
.questionnair_tit,
.questionnair_num {
  text-align: center;
}
.questionnair_tit {
  color: #00aeff;
  font-size: 18px;
  line-height: 18px;
  margin: 27.33px 0 13.33px;
}
.questionnair_num {
  font-size: 14px;
  line-height: 14px;
}
.bar_img {
  width: 6.67px;
  height: 16.67px;
  margin-right: 10px;
}
.item_tit {
  color: #333333;
  font-size: 16.67px;
  font-weight: bold;
}
.item_line {
  border-bottom: 0.33px solid rgba(0, 0, 0, 0.2);
  margin: 13px 0;
}
.item_txt {
  color: #666666;
  font-size: 14.67px;
  line-height: 14.67px;
}
.item_btn {
  width: 73.33px;
  height: 33.33px;
  line-height: 33.33px;
  color: #ffffff;
  font-size: 12.67px;
  text-align: center;
  background: linear-gradient(0deg, #ffffff -20%, rgba(255, 255, 255, 0) 20%),
    #0aa7f4;
  border-radius: 6.67px;
}
.dis_btn {
  opacity: 0.5;
}
.fish_img {
  width: 16.33px;
  height: 16px;
  margin-right: 7px;
}
.fish_txt {
  color: #14c76a;
  font-size: 14px;
  line-height: 14px;
}
.deadline {
  color: #888888;
  font-size: 14px;
  line-height: 14px;
  margin: 32px auto;
  text-align: center;
}
</style>
